



// context 隔空传递  传送门 
// Context 
// 隔空传递 
// context 隔空传递数据
// 数据嵌套太深  props   
// props 一级一级往里面传递数据    比较麻烦  
// context 隔空传递   this.context 

// redux    
// mobx        运用 context API  
// https://segmentfault.com/a/1190000004636213  

// context 在父组件声明
// 子组件获取 context 

// redux mobx  

// createContext  高级用法 

import React, { Component , createContext  } from 'react';
import PropTypes from 'prop-types';
import { styles } from '../utils/common';

const AllContext = createContext()  // 全局的context 对象 

class MyContext extends Component {

    // 定义子组件的context 数据 
    getChildContext(){
        return {
            msg:"ARe you sleep ??? ",
            count:1314520 
        }
    }

    state = {
        word:"wh2217 - 每天进步一点点... "
    }
    render() {
        return (
            <div>
                <h2>context 进行隔空传递 </h2>
                {/* <CptA word={this.state.word} ></CptA> */}

                {/* 第二种context */}
                <MyParent></MyParent>
            </div>
        );
    }
}

const value = {
    tips:"好凉快",
    time:'0310',
    message:'明天上课哦...'
}


class MyParent extends Component{
    render(){
        return (
            <div>
                <AllContext.Provider value={value} >
                    <Middle></Middle>
                </AllContext.Provider>
            </div>
        )
    }
}

// 中间组件 
class Middle extends Component{
    render(){
        return (
            <Two></Two>
        )
    }
}

// 获取context 
class Two extends Component{
    static contextType = AllContext;
    render(){
        console.log(this.context)   // 获取 来自父组件的 context 
        return (
            <div>
                {/* <AllContext.Consumer>
                    {value => <div>{value}</div>}
                </AllContext.Consumer> */}
                <CptA></CptA>
            </div>
        )
    }
}






MyContext.childContextTypes  = {
    msg:PropTypes.string.isRequired,
    count:PropTypes.number 
}

class CptA extends Component{
    render(){
        return (
            <div style={styles.box}>
                <h2>组件A - 1 </h2>
                <CptB word={this.props.word} ></CptB>
            </div>
        )
    }
}

class CptB extends Component{
    static contextType = AllContext;
    render(){

        return (
            <div style={styles.box}>
                <h2>组件B - 2 </h2>
                <h2>tips == {this.context.tips} </h2>
                <h2>time == {this.context.time} </h2>
                <h2>message == {this.context.message} </h2>


                <CptC word={this.props.word} ></CptC>
            </div>
        )
    }
}



class CptC extends Component{
    render(){
        return (
            <div style={styles.box}>
                <h2>组件C - 3 </h2>
                <h2>count=== {this.context.count} </h2>
                <CptD word={this.props.word} ></CptD>
            </div>
        )
    }
}

CptC.contextTypes={
    count:PropTypes.number 
}



class CptD extends Component{
    render(){
        const {word} = this.props 
        console.log(this)

        const {msg} = this.context 
        return (
            <div style={styles.box}>
                <h2>组件D - 4 </h2>
                <h3> word = {word} </h3>
                <h3>msg = {msg} </h3>
            </div>
        )
    }
}

CptD.contextTypes = {
    msg:PropTypes.string,
}

export default MyContext;
